/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'mixins';
@import '../Terminal/mixins';
@import 'SequenceDiagram/Bar';

@include PlainTerminal {
  @include TableContainer {
    &.kui--timeline-container {
      width: 35rem;
    }
  }
}

.kui--timeline-container,
.kui--timeline {
  height: 100%;
}

.kui--timeline {
  position: relative;
}

.kui--timeline-y-axis {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;

  .kui--timeline-tick {
    left: 0;
    right: 0;
  }
}

.kui--timeline-ticks {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.09) 15%, rgba(0, 0, 0, 0.03) 45%, rgba(0, 0, 0, 0.01));
}

.kui--timeline-tick {
  flex: 1;
  opacity: 0.15;
  border-top: 1px dashed var(--color-base05);
}

.kui--timeline-occupancy-line {
  top: 0;
  display: flex;
  justify-content: flex-end;
  padding: 0 0.5rem;
  opacity: 1;
  border-style: solid;
  border-color: var(--color-table-border3);
}

.kui--timeline-occupancy-line-label {
  font-size: 0.625rem;
  background-color: var(--pf-c-card--BackgroundColor);
  padding: 3px;
  border-radius: 2px / 4px;
  margin: 2px 0;
  opacity: 0.6;
}

.kui--timeline-buckets {
  display: flex;
}

.kui--timeline-buckets,
.kui--timeline-y-axis {
  height: 19.6875rem; /* 16:9, see 35rem above */
}

.kui--timeline-bucket {
  flex: 1;
  display: flex;
  flex-direction: column;

  [data-is='execution'],
  [data-is='cold-start'] {
    background-color: var(--color-latency-1);
  }

  & > div:not(.leftover) {
    /* box-shadow: inset -0.5px 0px var(--color-table-border1); */

    &:hover {
      filter: saturate(2) brightness(1.25);
    }
  }
}
